<template>
    <l-layout class="l-tab-page" v-if="!lr_loadPage" >
        <l-panel>
            <template #toolLeft >
                <div class="l-panel--item" >
                    <el-input :placeholder="$t('请输入关键字查询')" v-model="searchWord"  @keyup.enter.native="hanleSearch" size="mini" >
                        <el-button slot="append" icon="el-icon-search" @click="hanleSearch" ></el-button>
                    </el-input>
                </div>
            </template>
            <template #toolRight >
                <l-tool-btns @click="handleAdd()" >
                    <l-excel-btns></l-excel-btns>
                </l-tool-btns>
            </template>
            <l-table
                :loading="tableLoading"
                :columns="columns"
                :dataSource="tableData" 
                row-key="f_Id"
                :isPage="true"
                :pageTotal="tableTotal"
                :tablePage.sync="tableCurrentPage"
                >
                <template v-slot:f_MessageType="scope" >
                    {{formatterType(scope.row.f_MessageType)}}
                </template>
                <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
            </l-table>
        </l-panel>

        <l-dialog 
            :title="$t(formTitle)"
            :visible.sync="formVisible"
            @ok="handleSave"
            @close="handleCloseForm"
            @opened="handleOpenedForm"
            >
            <my-form ref="form" ></my-form>       
        </l-dialog>
    </l-layout>
</template>

<script>
const api = window.$api.message.strategy
import MyForm from './form'
export default {
  components: {
    MyForm
  },
  data () {
    return {
        lr_isPage:true,
        // 表格
        columns: [
            {label:'名称',prop:'f_StrategyName',minWidth:'140'},
            {label:'编码',prop:'f_StrategyCode',minWidth:'110'},
            {label:'类型',prop:'f_MessageType',width:'150'},
            {label:'备注',prop:'f_Description',minWidth:'300'}
        ],
        tableBtns:[
            {prop:'Edit',label:this.$t('编辑'),width:40},
            {prop:'Delete',label:this.$t('删除'),width:40}
        ],
        tableLoading:false,
        searchWord:'',
        tableTotal:0,
        tablePageSize:50,
        tableCurrentPage:1,
        tableData: [],

        formVisible:false,
        formTitle:'',
        formEditRow:null,
        formEdit:false
    };
  },
  mounted () {
      this.loadTablePageData()
  },
  computed:{
  },
  methods:{
    loadTablePageData(isNotFirst){
        if(!isNotFirst){
            this.tableCurrentPage = 1;
        }
        this.tableLoading = true;
        let queryData = {
            rows:this.tablePageSize,
            page:this.tableCurrentPage,
            sidx:'f_CreateDate DESC',
            keyword:this.searchWord
        }
        api.getPage(queryData).then(res=>{
            const data = this.$deepClone(res.data.data)
            this.tableData = data.rows
            this.tableTotal = data.records
            this.tableLoading = false

        }).catch(()=>{
            this.tableData = []
            this.tableLoading = false
        })
    },
    turnTablePage({rows}){
        this.tablePageSize = rows
        this.loadTablePageData(true)
    },
    hanleSearch(){
        this.loadTablePageData()
    },
    formatterType(cellvalue) {
        cellvalue = (cellvalue || '') + ''
        var vlist = cellvalue.split(',')
        var rlist = []
        vlist.forEach(item => {
            switch (item) {
                case '1':
                    rlist.push(this.$t('邮件'))
                    break;
                case '2':
                    rlist.push(this.$t('微信'))
                    break;
                case '3':
                    rlist.push(this.$t('短信'))
                    break;
                case '4':
                    rlist.push(this.$t('系统IM'))
                    break;
            }
        })
        return String(rlist)
    },

    // 表单部分
    handleAdd(){
        this.formEdit = false;
        this.showForm('新增');
    },
    handleEdit($index,row){
        this.formEdit = true;
        this.formEditRow = row;
        this.showForm('编辑');
    },
    handleDelete($index,row){
        this.$confirm(
            this.$t('此操作将永久删除该数据, 是否继续?'), 
            this.$t('提示'), {
          confirmButtonText: this.$t('确定'),
          cancelButtonText: this.$t('取消'),
          type: 'warning'
        }).then(() => {
            api.remove(row.f_Id).then(()=> {
                this.$message({
                    type: 'success',
                    message: this.$t('删除成功!')
                })
                this.loadTablePageData()
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('已取消删除')
          })         
        })
    },
    async handleSave(showLoading,hideLoading){
        showLoading()
        if(!await this.$refs.form.validateForm()){
            hideLoading()
            return
        }

        const formData = this.$refs.form.getForm()
        if(this.formEdit){// 修改数据
            api.update(formData.f_Id,formData).then(()=> {
                hideLoading();
                this.formVisible = false;
                this.$message({
                    type: 'success',
                    message: this.$t('更新成功!')
                })
                this.loadTablePageData()
            }).catch(() => {
                hideLoading()
            })
        }
        else{// 新增数据
            api.add(formData).then(()=> {
                hideLoading();
                this.formVisible = false;
                this.$message({
                    type: 'success',
                    message: this.$t('添加成功!')
                })
                this.loadTablePageData()
            }).catch(() => {
                hideLoading()
            })
        }
    },
    handleOpenedForm(){
        if(this.formEdit){
            this.$refs.form.setForm(this.formEditRow)
        }
    },
    handleCloseForm(){
        this.$refs.form.resetForm()
    },
    showForm(text){
        this.formTitle = text
        this.formVisible = true
    }
  }

}
</script>